import {Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {NzInputDirective} from 'ng-zorro-antd/input';
import {Model} from '../../data/model';
import {ModelService} from '../../data/model-service';
import {ReactiveEvent} from '../../data/reactive-event';
import {Observable, Subscription} from 'rxjs';
import {debounceTime} from 'rxjs/operators';
import {newDataStore} from '../../data/DataStore';
import {FocusDirective} from '../../directive/focus.directive';
import {DomSanitizer} from '@angular/platform-browser';

/**
 * 表格测试
 */
@Component({
  selector: 'app-grid-demo1',
  templateUrl: './grid-demo1.component.html',
  styleUrls: ['./grid-demo1.component.scss']
})
export class GridDemo1Component implements OnInit, OnDestroy {
  i = 0;
  editId: string | null;
  listOfData: any[] = [];
  modelService: ModelService = new ModelService();
  modelEvent: ReactiveEvent = new ReactiveEvent();
  dataChange: Subscription;
  dataStore: any = newDataStore([]);
  @ViewChild(FocusDirective, {static: false, read: ElementRef}) inputElement1: ElementRef;
  @ViewChild(NzInputDirective, {static: false, read: ElementRef}) inputElement: ElementRef;
  loginHtml: any;

  constructor(private sanitizer: DomSanitizer) {
    const me = this;
    this.dataChange = this.modelEvent.on('change')
      .pipe(debounceTime(300))
      .subscribe((event => {
        me.modelService.collectModified(event.data, event.preData);
      }));
/*    setTimeout(() => {
      this.loginHtml = this.sanitizer.bypassSecurityTrustHtml('<button nz-button (click)="addRow()" nzType="primary">Add</button>');
      }, 100);*/

  }

  @HostListener('window:click', ['$event'])
  handleClick(e: MouseEvent): void {
    if (this.editId && this.inputElement && this.inputElement.nativeElement !== e.target) {
      this.editId = null;
    }
  }

  addRow(): void {
    const record: Model = new Model({
      id: `${this.i}`,
      name: `Edward King ${this.i}`,
      age: 32,
      address: `London, Park Lane no. ${this.i}`
    }, 'id', this.modelEvent);
    /*record.id =  `${this.i}`;
    record.name = `Edward King ${this.i}`;
    record.age = '32';
    record.address = `London, Park Lane no. ${this.i}`;*/
    this.modelService.collectAdded(record);
    this.dataStore.push(record);
    this.i++;
  }

  deleteRow(id: string): void {
    this.listOfData = this.listOfData.filter(d => d.id !== id);
  }

  startEdit(id: string, event: MouseEvent): void {
    event.preventDefault();
    event.stopPropagation();
    console.log({id});
    this.editId = id;
  }

  ngOnInit(): void {
    const initData = [
      new Model({
        id: `0`,
        name: `Edward King 0`,
        age: 24,
        address: `London, Park Lane no. 0`
      }, 'id', this.modelEvent),
      new Model({
        id: `1`,
        name: `Edward King 1`,
        age: 26,
        address: `London, Park Lane no. 1`
      }, 'id', this.modelEvent)
    ];
    this.dataStore.data = initData;
    this.i = 2;
  }

  getData() {
    console.log(this.dataStore.data);
    return this.dataStore.data;
  }

  ngOnDestroy(): void {
    this.modelEvent.destroy(this.dataChange);
  }

  getModified(): object[] {
    console.log(this.modelService.getModified());
    return this.modelService.getModified();
  }

  getAdded(): object[] {
    console.log(this.modelService.getAdded());
    return this.modelService.getAdded();
  }

  save() {
    this.modelService.reset();
  }

  test() {
    console.log('test');
    event.preventDefault();
    event.stopPropagation();
    this.editId = '0';
  }
}
